<template>
  <div id="accu-bar"
    style="width:100%;height:100%"></div>
</template>

<script>
  import * as echarts from 'echarts';

  export default {
    name: 'ChartDatazoom',
    props: {
      objdata: {
        type: Object,
        default: () => {}
      }
    },
    watch: {
      objdata(obj) {
        let { data, yAxisData, legend } = obj;
        this.yAxisData = yAxisData;
        this.legendData = legend;
        this.accuBarData = data;
        this.initChart();
      }
    },
    data() {
      return {
        yAxisData: [],
        accuBarData: [],
        legendData: []
      };
    },
    created() {},
    methods: {
      initChart() {
        const dom = document.getElementById('accu-bar');
        if (dom) {
          this.chart = echarts.init(dom);
          let options = {
            tooltip: {
              trigger: 'axis',
              formatter: (params) => {
                let name = params[0].name;
                let str = '';
                for (let p of params) {
                  str += p.marker + p.seriesName + ':&nbsp;' + p.value + '&nbsp;万亩<br />';
                }
                return name + '<br />' + str;
              }
            },
            legend: {
              top: 0,
              left: '20',
              icon: 'rect',
              itemWidth: 14,
              itemHeight: 14,
              data: this.legendData,
              textStyle: {
                color: '#fff'
              }
            },
            grid: {
              top: '70px',
              left: 20,
              right: 20,
              bottom: 10,
              containLabel: true
            },
            xAxis: {
              type: 'value',
              axisLabel: {
                color: '#fff'
              }
            },
            yAxis: {
              name: '行政区',
              // 坐标轴名称与轴线之间的距离
              nameGap: 5,
              nameTextStyle: {
                color: '#fff'
              },
              type: 'category',
              data: this.yAxisData,
              axisLabel: {
                color: '#fff'
              }
            },
            series: this.accuBarData
          };
          this.chart.setOption(options);
          this.chart.on('click', (params) => {
            console.log(11111, params);
          });
        }
      }
    }
  };
</script>